<template> 
<div class="login"></div>
</template>

<script type="text/javascript">
export default {
  name: "login",
  // 静态数据部分
  data() {
    return {
      name: "",
      password: ""
    }
  },
  props: [], 
  components: {},  // 组件
  computed: {},  // 计算属性
  watch: { max(newvue, oldvue) { } }, //监听属性
  methods: {},  // 自定义方法部分

  // 生命周期
  beforeCreate() {},        // 创建之前  在此时即无视图也无数据 还不能访问data中的数据
  created() {},             // 创建完成 在此时无视图 数据加载完成 可以对数据进行处理 
  beforeMount() {},         // 加载之前  数据还未插入到视图中  还是虚拟DOM的形式
  mounted() {},             // 加载已完成 数据插入完成
  beforeUpdate() {},        // 更新前  vue在data中的数据发生变化时会触发 该事件
  updated() {},             // 更新完成 数据更新完成--> mounted
  beforeDestroy() {},       // 销毁前 在此时还可以对vue 实例做一些处理 比如移除某些事件等。。。。
  destroyed() {},           // 销毁后 Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
  beforeRouteEnter(to, from, next){},     // 在渲染该组件的对应路由被 confirm 前调用,不！能！获取组件实例 `this`,因为当守卫执行前，组件实例还没被创建
  beforeRouteUpdate(to, from, next){},    // 在当前路由改变，但是该组件被复用时调用,举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。可以访问组件实例 `this`
  beforeRouteLeave(to, from, next){},     // 导航离开该组件的对应路由时调用,可以访问组件实例 `this`
</script>


<style scoped lang="less">
</style>

/* 
beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
beforeRouteEnter (to, from, next) {
  next(vm => {
    next(vm => vm.setData(err, post))
  })
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}


这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来中断导航。    
beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}
*/